<script setup>
import {ref, defineProps, computed} from 'vue'
import ShopInfo from "@/components/ShopInfo.vue"
import product from '@/components/Product.vue'
import router from '@/router/index'
import {useShopStore} from "@/stores/ShopStore.js"
import {storeToRefs} from "pinia";
import CartBottom from "@/components/CartBottom.vue";

const {shopInfo} = storeToRefs(useShopStore())

const isActive = ref(0)
const activeList = computed(()=>{
  const arr = []
  if (isActive.value === 0){
    shopInfo.value.category.forEach(item => {
      arr.push(...item.list)
    })
  }else {
   const acttiveList = shopInfo.value.category.find(item => item.id === isActive.value).list
    arr.push(...acttiveList)
  }
  return arr
})
</script>

<template>
    <div class="shop">
        <!-- 搜索 -->
        <div class="search">
            <span class="iconfont search_back"  @click="router.back()">&#xe697;</span>
            <div class="search_content">
                <span class="iconfont search_content_icon">&#xe632;</span>
                <input type="text" class="search_content_input" placeholder="请输入商品名称">
            </div>
        </div>
        <!-- 商店信息 -->
        <div class="shop_info">
           <!-- 商店组件商店组件商店组件 -->
            <div class="shop" >
              <div class="shop_img">
                <img :src="shopInfo.imgUrl" alt="">
              </div>
              <div class="shop_content">
                <div class="shop_content_title">{{ shopInfo.name }}</div>
                <div class="shop_content_tags">
                  <span class="shop_content_tag">月售: {{ shopInfo.sales }}</span>
                  <span class="shop_content_tag">起送: {{ shopInfo.expressLimit }}</span>
                  <span class="shop_content_tag">基础运费: {{ shopInfo.expressPrice }}</span>
                </div>
                <div class="shop_content_highlight">{{ shopInfo.slogan }}</div>
              </div>
            </div>
          </div>
        <!-- 内容 -->
        <div class="content">
            <div class="category">
                <div :class="{'category_item' : true, 'category_item--active':isActive === 0}" @click="isActive= 0">全部商品</div>
                <div  v-for="(item,index) in shopInfo.category" :class="{'category_item' : true, 'category_item--active':isActive === item.id}" @click="isActive = item.id">{{ item.name }}</div>
            </div>
            <div class="product">
                <div>
                   <product :activeList="activeList" :name="shopInfo.name"></product>
                </div>
            </div>
        </div>
        <!-- 购物车底部 -->
        <CartBottom></CartBottom>
    </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
.shop {

  .shop {
    display: flex;
    margin: .12rem 0;
    min-height: .9rem;
    border-bottom: solid .01rem $content_bgColor;

    &_img {
      display: flex;
      align-items: center;
      margin-right: .16rem;

      img {
        width: .56rem;
        height: .56rem;
      }
    }

    &_content {
      min-width: 2.67rem;
      font-family: PingFangSC-Regular;
      color: $content_fontcolor;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      &_title {
        line-height: .22rem;
        font-size: .16rem;
        margin-bottom: .08rem;
      }
      &_tags {
        font-size: .13rem;
        margin-bottom: .08rem;
      }
      &_tag {
        line-height: .18rem;
        margin-right: .16rem;
      }
      &_highlight {
        line-height: .18rem;
        margin-right: .16rem;
        color: #E93B3B;
        margin-bottom: .08rem;
      }
    }
  }
    //搜索
    .search {
        margin: .18rem;
        display: flex;
        align-items: center;

        &_back {
            font-size: .24rem;
            margin-right: .08rem;
            color: #b6b6b6;
        }
        &_content {
            flex: 1;
            height: .32rem;
            background-color: #f5f5f5;
            border-radius: .16rem;
            display: flex;
            align-items: center;

            &_icon {
                color: #b6b6b6;
                margin: 0 .12rem;
            }
            &_input {
                border: none;
                outline: none;
                background: none;
                width: 100%;
                height: .32rem;
            }
        }
    }
    //商店信息
    .shop_info {
        margin: 0 .18rem;
    }
    // 内容
    .content {
        position: absolute;
        left: 0;
        right: 0;
        top: 1.7rem;
        bottom: .5rem;
        display: flex;

        .category {
            overflow-y: scroll;
            width: .78rem;
            background-color: #f5f5f5;

            &_item {
                line-height: .4rem;
                font-size: .14rem;
                text-align: center;
                color: $content_fontcolor;

                &--active {
                    background-color: $bgColor;
                }
            }
        }
        .product {
            flex: 1;
            overflow-y: scroll;
        }
    }
}
</style>